<admintpl file="header" />
<link rel="stylesheet" href="__PUBLIC__/css/simple_upload.css" type="text/css" />
</head>
<body>
	<div class="wrap">
		<ul class="nav nav-tabs">
			<li><a href="{:U('Admin/Live/index')}">直播列表</a></li>
			<li class="active"><a href="{:U('Admin/Live/add_competition')}">添加赛事直播</a></li>
			<li><a href="{:U('Admin/Live/add_activity')}">添加活动直播</a></li>

		</ul>
		<form method="post" class="form-horizontal js-ajax-form" action="{:U('Admin/Live/add_competition_post')}">
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">直播名称：</label>
					<div class="span3">
						<input type="text" name="name" >
					</div>
					<label class="span1 control-label" style="width: 90px;"><nobr>是否VR：</nobr></label>
					<div class="span3">
						<select class="select_2" name="category">
							<option value="1" >否</option>
							<option value="2" >是</option>
						</select>
					</div>
				</div>
				
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">开始时间：</label>
					<div class="span3">
						<input type="text" name="startTime" class="js-datetime"  value="{$formParam.startTime}" autocomplete="off">
					</div>
					<label class="span1 control-label" style="width: 90px;">结束时间：</label>
					<div class="span3">
						<input type="text" class="js-datetime" name="endTime" value="{$formParam.endTime}" autocomplete="off">
					</div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">选择频道：</label>
					<div class="span3">
						<select multiple="multiple" id="allChannelIds" style="height:120px;">
						   <foreach name="channels" item="vo">
								<option value="{$vo.channelId}" >{$vo.channelName}</option>
							</foreach>
						</select>
					</div>
					<label class="span1 control-label" style="width: 90px;text-align:center;margin-top:36px;">></label>
					<div class="span3">
						<input type="hidden" name="channelIds" id="channelIds"/>
						<select multiple="multiple" id="selectedChannelIds" style="height:120px;">
							
						</select>
					</div>
				</div>
				
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">解说员：</label>
					<div class="span3">
						<select multiple="multiple" id="allOperatorIds" style="height:120px;">
						    <foreach name="operatorList" item="vo">
								<option value="{$vo.operatorId}" >{$vo.onickName}({$vo.ouserName})</option>
							</foreach>
						</select>
					</div>
					<label class="span1 control-label" style="width: 90px;text-align:center;margin-top:36px;">></label>
					<div class="span3">
						<input type="hidden" name="operatorIds" id="operatorIds"/>
						<select multiple="multiple" id="selectedOperatorIds" style="height:120px;">
							
						</select>
					</div>
				</div>
				
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">A队名称：</label>
					<div class="span3">
						<input type="text" name="teamAName" >
					</div>
					<label class="span1 control-label" style="width: 90px;">B队名称：</label>
					<div class="span3">
						<input type="text" name="teamBName" >
					</div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;"><nobr>赛事类型：</nobr></label>
					<div class="span3">
						<select class="select_2" name="typeId">
							<foreach name="types" item="vo">
								<option value="{$vo.typeId}" data-category="{$vo.category}">{$vo.name}</option>
							</foreach>
						</select>
					</div>
					<label class="span1 control-label" style="width: 90px;">平局赔率：</label>
					<div class="span3">
						<input type="text" name="drawOdds" value="1">
					</div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">A队赔率：</label>
					<div class="span3">
						<input type="text" name="teamAOdds" >
					</div>
					<label class="span1 control-label" style="width: 90px;">B队赔率：</label>
					<div class="span3">
						<input type="text" name="teamBOdds" >
					</div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">A队图标：</label>
					
					<div class="span3 wrapper">
                          <div id="uploader-image">
                              <div id="fileList" class="uploader-list">
                                  <div id="teamAIconDiv" class="file-item thumbnail" style="width:100px;height: 100px;">
                                      <img id="teamAIconPreview" src="__PUBLIC__/images/furley_bg.png" style="width:100px;height: 90px;">
                                      <div id="teamAIconPicker" class="info">选择图标&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                      <input style="display:none;" type="file" id="teamAIconFile" name="teamAIconFile" >
                                  </div>
                              </div>
                          </div>
                    </div>
					<label class="span1 control-label" style="width: 90px;">B队图标：</label>
					<div class="span3 wrapper">
                          <div id="uploader-image">
                              <div id="fileList" class="uploader-list">
                                  <div id="teamBIconDiv" class="file-item thumbnail" style="width:100px;height: 100px;">
                                      <img id="teamBIconPreview" src="__PUBLIC__/images/furley_bg.png" style="width:100px;height: 90px;">
                                      <div id="teamBIconPicker" class="info">选择图标&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                      <input style="display:none;" type="file" id="teamBIconFile" name="teamBIconFile" >
                                  </div>
                              </div>
                          </div>
                    </div>
				</div>
				<div class="control-group">
					<label class="span2 control-label" style="width: 90px;">直播介绍：</label>
					<div class="span7">
						<textarea style="width: 556px; height: 60px;" name="introduction"></textarea>
					</div>
				</div>
				<div class="control-group">
					<label class="span1 control-label" style="width: 90px;">封面图片：</label>
					<div class="span6 wrapper">
                          <div id="uploader-image">
                              <div id="fileList" class="uploader-list">
                                  <div id="imageDiv" class="file-item thumbnail" style="width:150px;height: 150px;">
                                      <img id="imagePreview" src="__PUBLIC__/images/furley_bg.png" style="width:150px;height: 140px;">
                                      <div id="picker" class="info">选择图片&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                      <input style="display:none;" type="file" id="imageFile" name="imageFile" >
                                  </div>
                              </div>
                          </div>
                    </div>
				</div>
			<div class="form-actions" style="padding-left:260px;">
				<button type="submit" class="btn btn-primary js-ajax-submit">保存</button>
				&nbsp;&nbsp;<a class="btn" href="{:U('Admin/Live/index')}">{:L('BACK')}</a>
			</div>
		</form>
	</div>
	<script src="__PUBLIC__/js/common.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/content_addtop.js"></script>
	<script type="text/javascript" >
		function html5Reader(file, previewId){
	        var file = file.files[0];
	        var reader = new FileReader();
	        reader.readAsDataURL(file);
	        reader.onload = function(e){
	            $('#'+previewId).attr('src', this.result);
	        }
	    }
	    function image_change(fileId, previewId) {
	        var pic = document.getElementById(previewId),
	                file = document.getElementById(fileId);
	
	        var ext = file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
	
	        // gif在IE浏览器暂时无法显示
	        if(ext != 'png' && ext != 'jpg' && ext != 'jpeg'){
	            alert("图片的格式必须为png或者jpg或者jpeg格式！");
	            return;
	        }
	        var isIE = navigator.userAgent.match(/MSIE/)!= null,
	                isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
	
	        if(isIE) {
	            file.select();
	            var realLocalPath = document.selection.createRange().text;
	
	            // IE6浏览器设置img的src为本地路径可以直接显示图片
	            if (isIE6) {
	                pic.src = realLocalPath;
	            }else {
	                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
	                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + realLocalPath + "\")";
	                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
	                pic.src = '';
	            }
	        }else {
	            html5Reader(file, previewId);
	        }
	    }

		function setOperatorIds(){
			var ids = [];
			$('#selectedOperatorIds option').each(function(){
				ids.push($(this).val());
			});
			$('#operatorIds').val(ids.join(','));
		}
		$('#allOperatorIds').dblclick(function(){  
			$('#selectedOperatorIds').append($('#allOperatorIds option:selected'));
	        $('#allOperatorIds option:selected').remove();  
	        setOperatorIds();
	    });
		
		$('#selectedOperatorIds').dblclick(function(){  
			$('#allOperatorIds').append($('#selectedOperatorIds option:selected'));
	        $('#selectedOperatorIds option:selected').remove();  
	        setOperatorIds();
	    });
		
		function setChannelIds(){
			var ids = [];
			$('#selectedChannelIds option').each(function(){
				ids.push($(this).val());
			});
			$('#channelIds').val(ids.join(','));
		}
		$('#allChannelIds').dblclick(function(){  
			$('#selectedChannelIds').append($('#allChannelIds option:selected'));
	        $('#allChannelIds option:selected').remove();  
	        setChannelIds();
	    });
		
		$('#selectedChannelIds').dblclick(function(){  
			$('#allChannelIds').append($('#selectedChannelIds option:selected'));
	        $('#selectedChannelIds option:selected').remove();  
	        setChannelIds();
	    });

		$("#picker").click(function(){
            $("#imageFile").click();
        });
		
		$("#imageFile").change(function(){
			image_change('imageFile', 'imagePreview');
        });
		
		$("#teamAIconPicker").click(function(){
            $("#teamAIconFile").click();
        });
		
		$("#teamAIconFile").change(function(){
			image_change('teamAIconFile', 'teamAIconPreview');
        });
		
		$("#teamBIconPicker").click(function(){
            $("#teamBIconFile").click();
        });
		
		$("#teamBIconFile").change(function(){
			image_change('teamBIconFile', 'teamBIconPreview');
        });
		
		function changeCategory(category){
			if(1 == category){
				$('select option[data-category="2"]').css('display', 'none')
				$('select option[data-category="1"]').css('display', '')
				$('select[name="typeId"]').val(1);
			}else{
				$('select option[data-category="2"]').css('display', '')
				$('select option[data-category="1"]').css('display', 'none')
				$('select[name="typeId"]').val(1);
			}
		}
		$('select[name="category"]').change(function(){
			changeCategory($(this).val());
		});
		changeCategory(1);
	</script>
</body>
</html>